<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="listview">
        <title>Walkthrough | Kendo UI ListView</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Learn how to display a custom layout of data-bound items through templates and easily implement the Kendo UI Listview widget in your application.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("controls/data-management/listview/basic-usage.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//controls/data-management/listview/basic-usage.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="walkthrough"><a href="#walkthrough">Walkthrough</a></h1>

<p>The purpose of the ListView is to display a custom layout of data-bound items through templates.</p>

<p>The ListView is ideally suited for scenarios where you wish to display a list of items in a consistent manner. You can see commonplace examples of its use in the design structures of the Internet, search engine results, tweets from Twitter, Facebook updates, inbox items in Gmail, card lists in Trello, and so on.</p>

<h2 id="basic-usage"><a href="#basic-usage">Basic Usage</a></h2>

<p>The ListView enables you to control the display of data. It does not provide a default rendering of data-bound items. Instead, it relies on templates to define the way a list of items is displayed, including alternating items and items being edited.</p>

<h3 id="target-elements"><a href="#target-elements">Target Elements</a></h3>

<p>To demonstrate how the ListView works, define a target HTML element such as a <code>&lt;list&gt;</code> or a <code>&lt;div&gt;</code>.</p>

<pre><code>&lt;div id="listView"&gt;&lt;/div&gt;

&lt;script type="text/x-kendo-tmpl" id="template"&gt;
    &lt;div class="product"&gt;
        &lt;img src="https://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" /&gt;
        &lt;h3&gt;#:ProductName#&lt;/h3&gt;
        &lt;p&gt;#:kendo.toString(UnitPrice, "c")#&lt;/p&gt;
    &lt;/div&gt;
&lt;/script&gt;
</code></pre>

<blockquote>
<p><strong>Important</strong>  </p>

<p>The ListView item template needs to have only one root element. In the previous example, this is the <code>div.product</code> element.</p>
</blockquote>

<h3 id="templates"><a href="#templates">Templates</a></h3>

<p>To initialize the ListView, refer the template. It displays the result set by the service.</p>

<pre><code>var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "https://demos.telerik.com/kendo-ui/service/Products",
            dataType: "jsonp"
        }
    }
});

$("#listView").kendoListView({
    dataSource: dataSource,
    template: kendo.template($("#template").html())
});
</code></pre>

<p>The following demo shows the case displayed in the previous example.</p>

<pre data-lang="html"><code>&lt;div id="listView" style="max-height:400px;overflow:auto;"&gt;&lt;/div&gt;

&lt;script type="text/x-kendo-tmpl" id="template"&gt;
    &lt;div class="product"&gt;
        &lt;img src="https://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" /&gt;
        &lt;h3&gt;#:ProductName#&lt;/h3&gt;
        &lt;p&gt;#:kendo.toString(UnitPrice, "c")#&lt;/p&gt;
    &lt;/div&gt;
&lt;/script&gt;

&lt;script&gt;

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "https://demos.telerik.com/kendo-ui/service/Products",
            dataType: "jsonp"
        }
    }
});

$("#listView").kendoListView({
    dataSource: dataSource,
    pageable: true,
    template: kendo.template($("#template").html())
});

&lt;/script&gt;
</code></pre>

<h3 id="paging"><a href="#paging">Paging</a></h3>

<p>When the number of items that are bound to a ListView is larger than expected, a <code>pager</code> will control the items that are displayed. To use a Pager:</p>

<ol>
<li>
<p>Create a target element for its rendering. It is typically placed near the ListView.</p>

<pre><code>&lt;div id="listView"&gt;&lt;/div&gt;
&lt;div class="k-page-wrap"&gt;
    &lt;div id="pager"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/x-kendo-tmpl" id="template"&gt;
    &lt;div class="product"&gt;
        &lt;img src="https://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" /&gt;
        &lt;h3&gt;#:ProductName#&lt;/h3&gt;
        &lt;p&gt;#:kendo.toString(UnitPrice, "c")#&lt;/p&gt;
    &lt;/div&gt;
&lt;/script&gt;
</code></pre>
</li>
<li>
<p>Update the ListView configuration through its <code>pageable</code> property to state that the widget supports paging and to initialize the <code>pager</code>.</p>

<pre><code>var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "https://demos.telerik.com/kendo-ui/service/Products",
            dataType: "jsonp"
        }
    },
    pageSize: 4
});

$("pager").kendoPager({
    dataSource: dataSource
});

$("#listView").kendoListView({
    dataSource: dataSource,
    pageable: true,
    template: kendo.template($("#template").html())
});
</code></pre>
</li>
</ol>

<p>The following demo represents the same example with a <code>pager</code> applied to the ListView.</p>

<pre data-lang="html"><code>&lt;div id="listView" style="max-height:400px;overflow:auto;"&gt;&lt;/div&gt;
&lt;div id="pager"&gt;&lt;/div&gt;


&lt;script type="text/x-kendo-tmpl" id="template"&gt;
    &lt;div class="product"&gt;
        &lt;img src="https://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" /&gt;
        &lt;h3&gt;#:ProductName#&lt;/h3&gt;
        &lt;p&gt;#:kendo.toString(UnitPrice, "c")#&lt;/p&gt;
    &lt;/div&gt;
&lt;/script&gt;

&lt;script&gt;
var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "https://demos.telerik.com/kendo-ui/service/Products",
            dataType: "jsonp"
        }
    }
});

$("pager").kendoPager({
    dataSource: dataSource
});

$("#listView").kendoListView({
    dataSource: dataSource,
    pageable: true,
    template: kendo.template($("#template").html())
});
&lt;/script&gt;

</code></pre>

<h3 id="alternate-items"><a href="#alternate-items">Alternate Items</a></h3>

<p>Your project might require you to visually differentiate each alternating item in a ListView. For example, you might need to render each second item from the previous example in a slightly darker background, that is, banded rows. To achieve this behavior through the use of a template that you set, define the <code>altTemplate</code> property.</p>

<p>The following example demonstrates how you can update your working project to include a template for alternating items.</p>

<pre><code>&lt;div id="listView"&gt;&lt;/div&gt;
&lt;div class="k-page-wrap"&gt;
    &lt;div id="pager"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/x-kendo-tmpl" id="template"&gt;
    &lt;div class="product"&gt;
        &lt;img src="https://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" /&gt;
        &lt;h3&gt;#:ProductName#&lt;/h3&gt;
        &lt;p&gt;#:kendo.toString(UnitPrice, "c")#&lt;/p&gt;
    &lt;/div&gt;
&lt;/script&gt;

&lt;script type="text/x-kendo-tmpl" id="altTemplate"&gt;
    &lt;div class="product alt"&gt;
        &lt;img src="https://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" /&gt;
        &lt;h3&gt;#:ProductName#&lt;/h3&gt;
        &lt;p&gt;#:kendo.toString(UnitPrice, "c")#&lt;/p&gt;
    &lt;/div&gt;
&lt;/script&gt;
</code></pre>

<p>The following demo represents the live example by using a template for alternating items.</p>

<pre data-lang="html"><code>
&lt;div id="listView" style="max-height:400px;overflow:auto;"&gt;&lt;/div&gt;
&lt;div class="k-pager-wrap"&gt;
    &lt;div id="pager"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/x-kendo-tmpl" id="template"&gt;
    &lt;div class="product"&gt;
        &lt;img src="https://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" /&gt;
        &lt;h3&gt;#:ProductName#&lt;/h3&gt;
        &lt;p&gt;#:kendo.toString(UnitPrice, "c")#&lt;/p&gt;
    &lt;/div&gt;
&lt;/script&gt;

    &lt;script type="text/x-kendo-tmpl" id="altTemplate"&gt;
        &lt;div class="product alt"&gt;
            &lt;img src="https://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" /&gt;
            &lt;h3&gt;#:ProductName#&lt;/h3&gt;
            &lt;p&gt;#:kendo.toString(UnitPrice, "c")#&lt;/p&gt;
        &lt;/div&gt;
    &lt;/script&gt;

&lt;script&gt;
var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "https://demos.telerik.com/kendo-ui/service/Products",
            dataType: "jsonp"
        }
    },
    pageSize: 3
});

$("#pager").kendoPager({
    dataSource: dataSource
});

$("#listView").kendoListView({
    dataSource: dataSource,
    template: kendo.template($("#template").html()),
    altTemplate: kendo.template($("#altTemplate").html()),
});
&lt;/script&gt;

&lt;style&gt;
    .alt { background-color: #EEE; }
&lt;/style&gt;

</code></pre>

<h3 id="selection-navigation-and-editing"><a href="#selection-navigation-and-editing">Selection, Navigation, and Editing</a></h3>

<p>In addition to paging, the ListView provides item selection, navigation, and inline editing functionalities. The support of these operations is achieved through the initialization of its Boolean configuration options. In the case of inline editing, the ListView provides the <code>editTemplate</code> property, which defines a template for this mode. Once defined, the ListView can render out this editing template through the edit method. When invoked, the <code>editTemplate</code> for the ListView is applied against the target item. In most scenarios, you have to implement this through an event model that is triggered when the user selects an item to modify.</p>

<p>The ListView encapsulates operations for adding, removing, selecting, and editing items. These methods enable you to modify the underpinning list of items through a series of user-initiated actions or events. Regarding inline editing, you need to first define a template that will be used when you edit the items.</p>

<pre><code>&lt;script type="text/x-kendo-tmpl" id="editTemplate"&gt;
    &lt;div class="product-view k-widget"&gt;
        &lt;div class="edit-buttons"&gt;
            &lt;a class="k-button k-button-icontext k-update-button" href="\\#"&gt;&lt;span class="k-icon k-update"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;a class="k-button k-button-icontext k-cancel-button" href="\\#"&gt;&lt;span class="k-icon k-cancel"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;dl&gt;
            &lt;dt&gt;Product Name&lt;/dt&gt;
            &lt;dd&gt;
                &lt;input type="text" class="k-textbox" data-bind="value:ProductName" name="ProductName" required="required" validationMessage="required" /&gt;
                &lt;span data-for="ProductName" class="k-invalid-msg"&gt;&lt;/span&gt;
            &lt;/dd&gt;
            &lt;dt&gt;Unit Price&lt;/dt&gt;
            &lt;dd&gt;
                &lt;input type="text" data-bind="value:UnitPrice" data-role="numerictextbox" data-type="number" name="UnitPrice" required="required" min="1" validationMessage="required" /&gt;
                &lt;span data-for="UnitPrice" class="k-invalid-msg"&gt;&lt;/span&gt;
            &lt;/dd&gt;
            &lt;dt&gt;Units In Stock&lt;/dt&gt;
            &lt;dd&gt;
                &lt;input type="text" data-bind="value:UnitsInStock" data-role="numerictextbox" name="UnitsInStock" required="required" data-type="number" min="0" validationMessage="required" /&gt;
                &lt;span data-for="UnitsInStock" class="k-invalid-msg"&gt;&lt;/span&gt;
            &lt;/dd&gt;
            &lt;dt&gt;Discontinued&lt;/dt&gt;
            &lt;dd&gt;&lt;input type="checkbox" name="Discontinued" data-bind="checked:Discontinued"&gt;&lt;/dd&gt;
        &lt;/dl&gt;
    &lt;/div&gt;
&lt;/script&gt;

$(document).ready(function(){
    $("#listView").kendoListView({
        selectable: true,
        navigatable: true,
        template: kendo.template($("#template").html()),
        editTemplate: kendo.template($("#editTemplate").html())
    });
});
</code></pre>

<p>The template you define for the inline editing of items may include other Kendo UI widgets. For more information on how to define a series of widgets for editing an item, refer to <a href="http://demos.telerik.com/kendo-ui/web/listview/editing.html">the example on KendoUI.com</a>.</p>

<p><strong>Figure 1: ListView item editing</strong></p>

<p><img src="/images/listview-item-editing.png" alt="ListView Item Editing"></p>

<p>The new <code>add</code> record functionality of ListView items is triggered by a <code>click</code> event that is initiated by a user and is wired up through <code>.click()</code> in jQuery.</p>

<pre><code>$(".k-add-button").click(function(e) {
    listView.add();
    e.preventDefault();
});
</code></pre>

<p>Item selection is another scenario supported by the ListView widget. By setting the selectable property to either <code>"single"</code> or <code>"multiple"</code>, you can allow users to select items.</p>

<pre><code>$("#listView").kendoListView({
    dataSource: dataSource,
    selectable: "multiple",
    template: kendo.template($("#template").html())
});
</code></pre>

<p>You can also detect when users pick up items through the <code>change</code> event, which is triggered upon their selecting one or more items via shift-select.</p>

<pre><code>$("#listView").kendoListView({
    change: function(e) {
        var data = dataSource.view();
        var selected = $.map(this.select(), function(item) {
            return data[$(item).index()].ProductName;
        });

        // index selected or read item information through data
    }
});
</code></pre>

<p>The following demo shows how to enable the item selection functionality.</p>

<pre data-lang="html"><code>&lt;div id="listView" style="max-height:400px;overflow:auto;"&gt;&lt;/div&gt;
&lt;div class="k-pager-wrap"&gt;
    &lt;div id="pager"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/x-kendo-tmpl" id="template"&gt;
    &lt;div class="product"&gt;
        &lt;img src="https://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" /&gt;
        &lt;h3&gt;#:ProductName#&lt;/h3&gt;
        &lt;p&gt;#:kendo.toString(UnitPrice, "c")#&lt;/p&gt;
    &lt;/div&gt;
&lt;/script&gt;


&lt;script&gt;
var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "https://demos.telerik.com/kendo-ui/service/Products",
            dataType: "jsonp"
        }
    },
    pageSize: 3
});

$("#pager").kendoPager({
    dataSource: dataSource
});

$("#listView").kendoListView({
    selectable: true,
    dataSource: dataSource,
    template: kendo.template($("#template").html())
});
&lt;/script&gt;


&lt;style&gt;
    .alt { background-color: #EEE; }
&lt;/style&gt;

</code></pre>

<h2 id="see-also"><a href="#see-also">See Also</a></h2>

<p>Other articles and how-to examples on the Kendo UI ListView:</p>

<ul>
<li><a href="/api/javascript/ui/listview">JavaScript API Reference</a></li>
<li><a href="/controls/data-management/listview/overview">Overview</a></li>
<li><a href="/controls/data-management/listview/how-to/drag-n-drop-reordering-using-kendo-touch">How to Reorder Using Drag-and-Drop and Kendo UI Touch</a></li>
<li><a href="/controls/data-management/listview/how-to/filtering-using-slider">How to Filter Using Slider Selection</a></li>
<li><a href="/controls/data-management/listview/how-to/persist-selection-after-data-operations">How to Persist Row Selection during Data Operations</a></li>
</ul> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

